<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		deleteUserAPI,
		showUserInfoAPI
	} from '@/apis/login.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	
	import { uesDocInfoStore } from '@/stores';
	const docStore=uesDocInfoStore()
	const swipeOptions = ref([{
		text: '删除',
		style: {
			backgroundColor: '#dd524d',
		},
	}, ])
	// 获取家属患者列表
	const activeID = ref(0)
	const showUserlist = ref([])

	function showUserInfo() {
		showUserInfoAPI().then((res) => {
			console.log(res);
			showUserlist.value = res.data
		}).catch((err) => {
			console.log(err);
		})
	}
	// console.log(showUserlist.value);
	// 点击选择家属患者
	const onActive = (item, index) => {
		activeID.value = index
	}
    
	const cardID = computed(() => {
		return showUserlist.value[activeID.value].id
	})

	// 右滑删除
	const swipdelete = (e, id) => {
		uni.showModal({
			content: '确定删除？',
			async success(res) {
				if (res.confirm) {
					uni.showLoading()
					await deleteUserAPI(id)
					uni.hideLoading()
					await showUserInfo()
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
				}
			}
		})
	}

// 下一步
const nextstep =()=>{
	 // 缓存id
	 docStore.userID=cardID.value
	 uni.navigateTo({
	 	url:'/subpack_consult/payment/index'
	 })
}



	onShow(() => {
		showUserInfo()
	})
</script>

<template>
	<scroll-page>
		<view class="patient-page">
			<view class="page-header">
				<view class="patient-title"> 请选择患者信息 </view>
				<view class="patient-tips">
					以便医生给出更准确的治疗，信息仅医生可见
				</view>
			</view>
			<!-- 卡片 -->
			<uni-swipe-action>
				<uni-swipe-action-item v-for="item,index in showUserlist" :key="item.id" :right-options="swipeOptions"
					@click="swipdelete($event,item.id)">
					<view class="archive-card " :class="{active:activeID==index}" @click="onActive(item,index)">
						<!-- (/^(.{3})(.+)(.{4})$/, '$1******$3') -->
						<view class="archive-info">
							<text class="name">{{item.name}}</text>
							<text class="id-card">{{item.idCard.replace(/^(.{3})(.+)(.{4})$/, '$1******$3')}}</text>
							<text v-if="item.defaultFlag === 1" class="default">默认</text>
						</view>
						<view class="archive-info">
							<text class="gender">{{ item.genderValue }}</text>
							<text class="age">{{ item.age }}岁</text>
						</view>
						<view hover-class="none" class="edit-link">
							<uni-icons type="compose" size="20" color="#16C2A3" />
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- 添加按钮 -->
			<view v-if="true" class="archive-card">
				<navigator class="add-link" hover-class="none" url="/subpackages/subpack_my/form/index">
					<uni-icons color="#16C2A3" size="24" type="plusempty" />
					<text class="label">添加患者</text>
				</navigator>
			</view>

			<!-- 因为前面写了，所以这个自己封装的组件就不用了 -->
			<!-- <indexs ></indexs> -->

		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button class="uni-button" @click='nextstep'>下一步</button>
		</view>
	</scroll-page>
</template>



<style lang="scss">
	// subpkg_consult/patient/index.scss
	.patient-page {
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 200rpx);
	}

	.page-header {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.patient-title {
		font-size: 36rpx;
		color: #121826;
	}

	.patient-tips {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #6f6f6f;
	}

	.archive-card {
		display: flex;
		flex-direction: column;
		justify-content: center;

		position: relative;

		height: 180rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		border: 1rpx solid transparent;
		background-color: #f6f6f6;

		&.active {
			background-color: rgba(44, 181, 165, 0.1);
			// border: 1rpx solid #16c2a3;
		}

		.archive-info {
			display: flex;
			align-items: center;
			color: #6f6f6f;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.name {
			margin-right: 30rpx;
			color: #121826;
			font-size: 32rpx;
			font-weight: 500;
		}

		.id-card {
			color: #121826;
		}

		.gender {
			margin-right: 30rpx;
		}

		.default {
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			padding: 0 12rpx;
			margin-left: 30rpx;
			border-radius: 4rpx;
			color: #fff;
			font-size: 24rpx;
			background-color: #16c2a3;
		}
	}

	.edit-link {
		position: absolute;
		top: 50%;
		right: 30rpx;

		transform: translateY(-50%);
	}

	.add-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.label {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #16c2a3;
		}
	}

	.next-step {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
		background-color: #fff;
	}

	:deep(.uni-swipe_button-group) {
		bottom: 30rpx;
	}
</style>